import React, {Component} from 'react';
import {
    Flex,
    Button,
    Icon
} from 'antd-mobile';
import { filter_item } from './filter.less';
import {connect} from "dva";

class Filter extends Component {
      constructor(props){
          super(props);
          this.state={
              open:false,
          }
      }
    openClick = () =>{
        this.setState({
            open:!this.state.open
        })
    }

    componentDidMount(){
        let {  specValueList=[] } = this.props.spec;
        let hasChecked= specValueList.some((v,i,a)=>{
            return v.checked==true
        })
        if(hasChecked==true){
            this.setState({
                open:true
            })
        }
    }

    changeSpecCheck = ( sonIndex, check ) => {
        let { dispatch, index } = this.props ;
        dispatch({ type:"storesShow/changeSpecCheck", index, sonIndex, check });
    }


    render() {
        let { spec, dispatch } = this.props;
        let { open } = this.state;
        let { name, specValueList=[] } = spec;
        let newSpecValueList = open==false ? specValueList.slice(0,3) : specValueList;
        return (
            <div className={ filter_item }>
                    <div>
                        <Flex justify="between" className="item_title">
                            <div>{name}</div>
                            {
                                specValueList.length>3 ? <Icon onClick={this.openClick} type={ open==false ? "down" : "up"  } /> : ''
                            }
                        </Flex>

                        <Flex wrap="wrap" justify="between" >
                            {
                                newSpecValueList.map((value, i) => {
                                    return (
                                        <div key={i}
                                             style={ value.check==true ? { backgroundColor:"#ff0036", color:"#fff" } : {} }
                                             className='spec_value text-overflow-hidden'
                                             onClick={ () => {
                                                 console.log('已选中')
                                                 this.changeSpecCheck(i,value.check == true ? false : true)
                                             }}
                                        >
                                            {value.name}
                                        </div>
                                        )
                                })
                            }
                        </Flex>
                    </div>
            </div>
            )


    }
}

export default  (Filter);
